<template>
  <div class="rose-echart">
    <!-- 饼图 -->
    <BaseEchart :option="option"></BaseEchart>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import BaseEchart from './base-echart.vue'
import type { EChartsOption } from 'echarts'
import type { IEchartValueType } from '../types'
interface IProps {
  roseData: IEchartValueType[]
}
const props = defineProps<IProps>()
const option = computed<EChartsOption>(() => {
  return {
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        // 内半径/外半径的大小
        radius: [10, 160],
        // 设置区域的位置
        center: ['50%', '50%'],
        bottom: '-15%',
        roseType: 'area', // 圆心角一样, 通过半径的不同表示大小
        itemStyle: {
          borderRadius: 8
        },
        data: props.roseData,
        label: {
          show: false
        }
      }
    ]
  }
})
// const option: EChartsOption = {
//   series: [
//     {
//       name: '访问来源',
//       type: 'pie', // 设置图表类型为饼图
//       radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
//       data: [
//         // 数据数组，name 为数据项名称，value 为数据项值
//         { value: 235, name: '视频广告' },
//         { value: 274, name: '联盟广告' },
//         { value: 310, name: '邮件营销' },
//         { value: 335, name: '直接访问' },
//         { value: 400, name: '搜索引擎' }
//       ]
//     }
//   ]
// }
</script>
<style lang="less" scoped>
.rose-echart {
  color: red;
}
</style>
